<template>
    <!--流水窗口 -->
    <view
        class="item-info"
        :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''"
    >
        <view class="cate-content">
            <view class="item-fixed-top">
                <view class="title">{{ title }}</view>
                <view class="close" @click="close">
                    <image
                        src="../../static/images/close.png"
                        mode="scaleToFill"
                    ></image>
                </view>
            </view>
            <!-- 累计销售流水 -->
            <view class="flow-c" v-if="objType == 1">
                <view class="t-h-box">
                    <text class="d-t">{{ dateTxt }}</text>
                    <text class="m-t">{{
                        md == 15 ? "预约金额" : saleMoneyTxt
                    }}</text>
                </view>
                <view class="cate-list comm-list">
                    <view class="flow-box">
                        <view
                            class="f-box"
                            v-for="(item, index) in list"
                            :key="index"
                        >
                            <view class="t-txt">{{ item.timestr }}</view>
                            <view class="m-txt">{{ item.amount }}</view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 预付款流水 :class="item.money.includes('-') ? 'font_red' : ''"-->
            <view class="flow-c" v-if="objType == 2">
                <view class="cate-list comm-list">
                    <view
                        class="r-flow-box"
                        v-for="(items, idx) in list"
                        :key="idx"
                    >
                        <view class="r-f-time">{{ items.atime }}</view>
                        <view
                            class="f-box"
                            v-for="(item, index) in items.list"
                            :key="index"
                        >
                            <view class="m-t-box">
                                <view class="m-txt">{{ item.money || ''}}</view>
                                <view class="t-txt">{{ item.txt }}</view>
                            </view>
                            <view class="r-n-txt">{{ item.uid_name }}</view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 应收订单流水 -->
            <view class="flow-c" v-if="objType == 3">
                <div class="tab-box">
                    <div class="tab-row" :class="tab_type == 1 ? 'avitve' : ''">
                        <span @click="cheTabType(1)">商品订单应收</span>
                    </div>
                    <div class="tab-row" :class="tab_type == 2 ? 'avitve' : ''">
                        <span @click="cheTabType(2)">服务订单应收</span>
                    </div>
                </div>
                <view class="cate-list comm-list">
                    <view v-if="list.length > 0">
                        <view
                            class="r-flow-box"
                            v-for="(items, idx) in list"
                            :key="idx"
                        >
                            <view class="r-f-time">{{ items.time }}</view>
                            <view
                                class="f-box"
                                v-for="(item, index) in items.ls"
                                :key="index"
                            >
                                <view class="m-t-box">
                                    <view class="t-txt">{{ item.no }}</view>
                                </view>
                                <view
                                    class="icon-font icon-style r-n-txt"
                                    @click="openReceMoneyWin(item)"
                                    >{{
                                        recedata.type == 1
                                            ? receTxt
                                            : copewithTxt
                                    }}:
                                    {{ item.amount_notpay + " " }}&#xe600;</view
                                >
                            </view>
                        </view>
                    </view>
                    <view v-else-if="recedata.rece">
                        <view class="r-flow-box">
                            <view class="r-f-time">{{
                                recedata.atime_txt
                            }}</view>
                            <view class="f-box">
                                <view class="m-t-box">
                                    <view class="t-txt">初期欠款</view>
                                </view>
                                <view
                                    class="icon-font icon-style r-n-txt"
                                    @click="openReceMoneyWin(recedata)"
                                    >{{
                                        recedata.type == 1
                                            ? receTxt
                                            : copewithTxt
                                    }}: {{ recedata.rece + " " }}&#xe600;</view
                                >
                            </view>
                        </view></view
                    >
                </view>
                <div class="statistics-box">
                    <div class="num-box">
                        应收订单 {{ od_detail_all.number_od }}
                    </div>
                    <div class="num-box">
                        应收金额 {{ od_detail_all.amount_notpay_all }}
                    </div>
                </div>
            </view>
        </view>
    </view>
</template>

<script>
import lang from "../../js/conf/Lang.js";

export default {
    data() {
        return {
            dateTxt: lang.dateTxt,
            saleMoneyTxt: lang.saleMoneyTxt,
            tab_type: 1,
            receTxt: lang.receTxt,
            copewithTxt: lang.copewithTxt,
            openShow: 0,
            md: "",
            title: "",
            objType: 1, //1：累计销售流水，2：预付款流水 3：
            list: [],
            od_detail_all: {},
            recedata: {
                type: "1",
            },
        };
    },
    methods: {
        /**流水记录***/
        show(type, data) {
            let timer = type === "show" ? 10 : 200;
            let state = type === "show" ? 1 : 0;
            this.openShow = 2;
            setTimeout(() => {
                this.openShow = state;
            }, timer);
            if (!type) return;
            this.tab_type = data.tab_type || 1;
            this.od_detail_all = data.od_detail_all || {};
            this.title = data.title;
            this.objType = data.objType;
            this.list = data.list;
            this.md = data.md;
            this.recedata = data.recedata ? data.recedata : this.recedata;
            console.log();
        },
        cheTabType(type) {
            this.$emit("cheTabType", type);
        },
        /*****应收款******/
        openReceMoneyWin(item) {
            if (item.rece && item.rece == 0) return;
            this.$emit("openReceMoneyWin", item);
        },

        /*******更新未付款*****/
        updateNotPayMoney(obj) {
            let len = this.list.length;
            for (let i = 0; i < len; i++) {
                let o = this.list[i];
                let tempArr = o.ls;
                for (let j = 0; j < tempArr.length; j++) {
                    let oo = tempArr[j];
                    if (oo.id == obj.odid) {
                        oo.amount_notpay = obj.amount_notpay;
                        break;
                    }
                }
            }
            if (this.recedata.recdid == obj.odid) {
                this.recedata.rece = obj.amount_notpay;
            }
        },

        /*****关闭****/
        close() {
            this.show();
        },
    },
};
</script>
<style lang="scss" scoped>
.statistics-box {
    height: 40px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .num-box {
        font-size: 14px;
        margin-right: 20px;
        &:last-child {
            margin: 0;
        }
    }
}
.tab-box {
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
    .tab-row {
        text-align: center;
        flex: 1;
        font-size: 12px;
        cursor: pointer;
        &.avitve {
            font-size: 14px;
            color: #3989fc;
        }
    }
}
</style>
<style lang="scss">
.mask {
    display: flex;
    align-items: flex-end;
    position: fixed;
    left: 0;
    top: var(--window-top);
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
    transition: 0.3s;
    .mask-content {
        width: 100%;
        max-height: 250px;
        background: #f3f3f3;
        transform: translateY(100%);
        transition: 0.3s;
        .item {
            border-bottom: 1px solid #ececec;
            padding: 10px 20px;
        }
        .active {
            color: #3388ff;
        }
    }
    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.4);
        .mask-content {
            transform: translateY(0);
        }
    }
}
.item-info {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    transition: 0.3s;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .cate-content {
        border-radius: 6px;
        overflow: hidden;
        width: 500px;
        background: #f8f8f8;
        float: right;
        transform: translateY(-100%);
        transition: 0.3s;
        position: relative;
        .item-fixed-top {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-bottom: 1px solid #ececec;
            .title {
                font-size: 16px;
            }
            .close {
                position: absolute;
                right: 5px;
                top: 12px;
                width: 32px;
                height: 32px;
                text-align: center;
                cursor: pointer;
                image {
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }

    &.none {
        display: none;
    }
    &.show {
        background: rgba(0, 0, 0, 0.3);
        .cate-content {
            transform: translateY(0);
        }
    }
}
.bg-color {
    background: #e6e6e6;
    padding: 5px;
}

.t-h-box {
    display: flex;
    background-color: #eee;
    font-size: 14px;
    color: #999;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    .d-t {
    }
    .m-t {
        // margin-right: auto;
    }
}

.cate-list {
    height: 500px;

    .flow-box {
        .f-box {
            display: flex;
            border-bottom: 1px #eee solid;
            line-height: 30px;
            padding: 5px 10px;
            font-size: 14px;
            position: relative;
            .m-txt {
                position: absolute;
                right: 15px;
            }
        }
    }

    .r-flow-box {
        font-size: 14px;
        color: #666;
        .r-f-time {
            background-color: #eee;
            line-height: 30px;
            padding-left: 10px;
        }
        .f-box {
            border-bottom: 1px #eee solid;
            padding: 10px 10px;
            display: flex;
            position: relative;
            .m-t-box {
                // display: flex;
                // c
                .m-txt {
                    color: #09bb07;
                }
            }
            .r-n-txt {
                position: absolute;
                right: 10px;
                font-size: 14px;
                cursor: pointer;
            }
            .r-n-txt:hover {
                color: #3388ff;
            }
        }
    }
}
</style>